/* 
  * App is mainly styled using Tailwind.css
  * This css file is here to achieve some styling requirements that otherwise 
  * wouldn't be able to achieve using Tailwind.css like Electron specific styles.

  * This file previously had 3200+ lines.
*/
@import 'tailwindcss';

@config '../../../../../tailwind.config.js';

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

@theme {
  --dialog-appear: dialogAppear 1s ease-out forwards;
  --dialog-dissappear: dialogDisappear 1s ease-in forwards;

  @keyframes dialogAppear {
    from {
      opacity: 0;
      visibility: hidden;
      transform: translate(-50%, -50%) scale(1.1);
    }

    to {
      opacity: 1;
      visibility: visible;
      transform: translate(-50%, -50%) scale(1);
    }
  }

  @keyframes dialogDisappear {
    from {
      opacity: 1;
      visibility: visible;
      transform: translate(-50%, -50%) scale(1);
    }

    to {
      opacity: 0;
      visibility: hidden;
      transform: translate(-50%, -50%) scale(1.1);
    }
  }
}

/* ? POPPINS FONT CONFIG */
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Light.woff2');
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Regular.woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Medium.woff2');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-SemiBold.woff2');
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Bold.woff2');
  font-weight: 700;
  font-display: swap;
}

/* ? MATERIAL ICONS CONFIG */
/* @font-face {
  font-family: 'Material Icons Round';
  font-style: normal;
  font-display: block;
  src: url('../fonts/MaterialSymbolsRounded.woff2');
} */

/* ? ROOT STYLES */
:root {
  --background-color-1: 0 0% 100%; /* hsl(0 0% 100%) */
  --background-color-2: 212 48% 94%; /* hsl(212 48% 94%) */
  --background-color-3: 213 80% 88%; /* hsl(213 80% 88%) */
  --side-bar-background: 212 50% 94%; /* hsl(212 50% 94%) */
  --background-color-dimmed: 0 0% 30%; /* hsl(0 0% 30% / 50%) */
  --song-background-color: var(--background-color-1);
  --text-color: 0 0% 0%; /* hsl(0 0% 0%) */
  --text-color-dimmed: 0 0% 50%; /* hsl(0 0% 50%) */
  --text-color-white: 0 0% 100%; /* hsl(0 0% 100%) */
  --text-color-black: 0 0% 0%; /* hsl(0 0% 0%) */
  --text-color-crimson: 348 83% 47%; /* hsl(348 83% 47%) */
  --text-color-highlight: 203 39% 44%; /* hsl(203 39% 44%) */
  --text-color-highlight-2: 247 74% 63%; /* hsl(247 74% 63%) */
  --context-menu-background: 0 0% 100%; /* hsl(0 0% 100% / 90%) */
  --context-menu-list-hover: 198 18% 89%; /* hsl(198 18% 89% / 75%) */
  --seekbar-background-color: 0 0% 20%; /* hsl(0 0% 20%) */
  --seekbar-track-background-color: 0 0% 80%; /* hsl(0 0% 80%) */
  --foreground-color-1: 247 74% 65%; /* hsl(247 74% 65%) */
  --scrollbar-thumb-background-color: 212 48% 94%; /* hsl(212, 48%, 94%) */
  --transition-duration-0_2s: 0.2s;
  --transition-duration-0_25s: 0.25s;
  --transition-duration-0_3s: 0.3s;
  --slider-opacity: 0.5;

  /* Dark colors */
  --dark-background-color-1: 228 7% 14%; /* hsl(228 7% 14%) */
  --dark-background-color-2: 225 8% 20%; /* hsl(225 8% 20%) */
  --dark-background-color-3: 213 80% 88%; /* hsl(213 80% 88%) */
  --dark-song-background-color: var(--background-color-2);
  --dark-side-bar-background: 228 7% 20%; /* hsl(228 7% 20%) */
  --dark-text-color: 0 0% 100%; /* hsl(0 0% 100%) */
  --dark-text-color-dimmed: 0 0% 50%; /* hsl(0 0% 50%) */
  --dark-text-color-highlight: 213 80% 88%; /* hsl(213 80% 88%) */
  --dark-text-color-highlight-2: 244 98% 80%; /* hsl(244 98% 80%) */
  --dark-context-menu-background: 228 7% 14%; /* hsla(228 7% 14% / 90%) */
  --dark-context-menu-list-hover: 224 8% 28%; /* hsl(224 8% 28%) */
  --dark-seekbar-background-color: 240 1% 83%; /* hsl(240 1% 83%) */
  --dark-seekbar-track-background-color: 0 0% 25%;
  --dark-scrollbar-thumb-background-color: 212 48% 94%; /* hsl(212, 48%, 94%) */
  --dark-slider-opacity: 0.25;
}

/* ? BASIC STYLING */
html {
  scroll-behavior: smooth;
}

* {
  font-family: 'Poppins', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
}

*:focus {
  outline: var(--text-color-highlight-2) !important;
}

/* ? DEFAULT SCROLL BAR STYLES */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: hsl(var(--background-color-1));
}

::-webkit-scrollbar {
  width: 12px;
  height: 8px;
  background-color: hsl(var(--background-color-1));
  transition: 'background';
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: hsl(var(--scrollbar-thumb-background-color));
  transition: 'background';
  cursor: pointer;
}

::-webkit-scrollbar-thumb:hover {
  background-color: hsl(var(--background-color-3));
}

/* ? MATERIAL SYMBOLS STYLES */
.material-icons-round {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1 !important;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
  user-select: none;
  transition: font-variation-settings 0.15s ease-in-out;
}

.material-icons-round {
  font-family: 'Material Symbols Rounded';
  font-variation-settings: 'FILL' 1;
}

.material-icons-round-outlined,
.material-icons-round.material-icons-round-outlined {
  font-family: 'Material Symbols Rounded';
  font-variation-settings: 'FILL' 0;
}

/* ? BODY STYLES */
body,
#root {
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
  background-color: var(--background-color-1);
}

/* body,
body * {
  transition:
    color var(--transition-duration-0_2s) linear,
    background-color var(--transition-duration-0_2s) linear;
  -webkit-transition:
    color var(--transition-duration-0_2s) linear,
    background-color var(--transition-duration-0_2s) linear;
  -moz-transition:
    color var(--transition-duration-0_2s) linear,
    background-color var(--transition-duration-0_2s) linear;
  -ms-transition:
    color var(--transition-duration-0_2s) linear,
    background-color var(--transition-duration-0_2s) linear;
  -o-transition:
    color var(--transition-duration-0_2s) linear,
    background-color var(--transition-duration-0_2s) linear;
} */

/* ? APP DARK THEME STYLES */
.App.dark,
.full-screen-player.dark,
.mini-player.dark {
  --background-color-1: var(--dark-background-color-1);
  --background-color-2: var(--dark-background-color-2);
  --background-color-3: var(--dark-background-color-3);
  --song-background-color: var(--dark-song-background-color);
  --side-bar-background: var(--dark-side-bar-background);
  --text-color: var(--dark-text-color);
  --text-color-dimmed: var(--dark-text-color-dimmed);
  --text-color-highlight: var(--dark-text-color-highlight);
  --text-color-highlight-2: var(--dark-text-color-highlight-2);
  --context-menu-background: var(--dark-context-menu-background);
  --context-menu-list-hover: var(--dark-context-menu-list-hover);
  --seekbar-background-color: var(--dark-seekbar-background-color);
  --scrollbar-thumb-background-color: var(--dark-scrollbar-thumb-background-color);
  --seekbar-track-background-color: var(--dark-seekbar-track-background-color);
  --slider-opacity: var(--dark-slider-opacity);
}

/* ? APP REDUCED MOTION STYLES */
:is(.App.reduced-motion, .mini-player.reduced-motion) * {
  animation-duration: 0ms !important;
  transition-duration: 0ms !important;
  backdrop-filter: 0 !important;
}

/* ? TITLE BAR STYLES */
#title-bar {
  -webkit-app-region: drag;
  user-select: none;
  -webkit-user-select: none;
}

:is(.previousPageBtn, .forwardPageBtn, .goToHomePageBtn).app-region-no-drag,
.mini-player-title-bar .special-controls-container,
.special-controls-and-indicators-container :is(.indicators-container, .special-controls-container),
.window-controls-container :is(.minimize-btn, .maximize-btn, .close-btn),
.app-version {
  -webkit-app-region: no-drag;
}

/* 
 ?  CONTEXT MENU STYLING 

.context-menu::-webkit-scrollbar-track {
  background-color: transparent;
  box-shadow: transparent;
  -webkit-box-shadow: transparent;
}

*/

/* ? SEEKBAR STYLING */
input[type='range']::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.25rem;
  cursor: pointer;
  background: hsl(var(--seekbar-track-background-color) / var(--slider-opacity));
  border-radius: 5rem;
}

input[type='range'].vertical::-webkit-slider-runnable-track {
  height: 0.25rem;
  cursor: row-resize;
}

input[type='range'].vertical::-webkit-slider-thumb {
  margin-top: -6.5px;
}

[type='range']::-webkit-slider-thumb {
  position: relative;
  -webkit-appearance: none;
  box-sizing: content-box;
  border: 0.15rem solid hsl(var(--seekbar-background-color));
  height: 0.75rem;
  width: 0.75rem;
  border-radius: 50%;
  background-color: hsl(var(--seekbar-background-color));
  cursor: pointer;
  margin: -6px 0 0 0;
  opacity: 0;
  transition-property: transform, opacity;
  transition: 150ms ease-in-out;
  transform: scale(0.5);
}

[type='range'].thumb-visible::-webkit-slider-thumb {
  opacity: 1;
  /* margin-left: 2px; */
  transform: scale(0.8);
}
[type='range'].vertical::-webkit-slider-thumb {
  height: 0.875rem;
  width: 0.875rem;
  cursor: row-resize;
}

input[type='range']:hover::-webkit-slider-thumb {
  opacity: 1;
  background: hsl(var(--text-color-highlight));
  backdrop-filter: blur(4px);
  border-color: hsl(var(--text-color-highlight));
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
}

input[type='range'].full-screen-player-seek-slider:hover::-webkit-slider-thumb {
  background: hsl(var(--background-color-3));
  border-color: hsl(var(--background-color-3));
}

input[type='range']:active::-webkit-slider-thumb {
  transform: scale(1.2);
}

#miniPlayerLyricsContainer::-webkit-scrollbar {
  display: none !important;
}

/* ? CHECKBOX STYLING */
input[type='checkbox']:checked ~ .checkmark .icon {
  opacity: 1;
}

/* ? THEME RADIO BUTTONS STYLES */
.theme-change-radio-btns > .theme-change-radio-btn input[type='radio']:checked + *::before {
  background: radial-gradient(
    hsl(var(--text-color-highlight) / 0%),
    hsl(var(--text-color-highlight) / 40%),
    transparent 50%,
    transparent
  );
  border-color: hsl(var(--text-color-highlight));
}

.theme-change-radio-btns > .theme-change-radio-btn input[type='radio']:checked + * {
  color: hsl(var(--text-color-highlight));
}

/* ? MINI PLAYER STYLES */
.mini-player .container .mini-player-title-bar {
  -webkit-app-region: drag;
}

.mini-player .container .seek-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.25rem;
  cursor: pointer;
  background: transparent;
  border-radius: 5rem;
}

/* ? / / / /  KEYFRAMES / / / / / / / */
.appear-from-bottom {
  opacity: 0;
  transform: translateY(2rem);
  animation: appearFromBottom var(--transition-duration-0_25s) ease forwards !important;
}

.disappear-to-bottom {
  opacity: 1;
  transform: translateY(0rem);
  animation: disappearToBottom var(--transition-duration-0_25s) ease forwards !important;
}

.appear-from-top-and-dissappear {
  opacity: 0;
  transform: translateY(-2rem);
  animation: appearFromTopAndDissappear 5000ms ease forwards;
}

.appear-from-top {
  opacity: 0;
  transform: translateY(-2rem);
  animation: appearFromTop var(--transition-duration-0_25s) ease forwards;
}

.disappear-to-top {
  opacity: 1;
  transform: translateY(0rem);
  animation: disappearToTop var(--transition-duration-0_25s) ease forwards;
}

@keyframes appearFromBottom {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes disappearToBottom {
  to {
    opacity: 0;
    transform: translateY(2rem);
  }
}

@keyframes appearFromTopAndDissappear {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  50% {
    opacity: 0;
    transform: translateY(-2rem);
  }

  100% {
    opacity: 0;
    transform: translateY(-2rem);
    display: none;
  }
}

@keyframes appearFromTop {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes disappearToTop {
  to {
    opacity: 0;
    transform: translateY(-2rem);
  }
}

@keyframes audioLoadingAnimation {
  0% {
    transform: translateX(-50%);
  }

  50% {
    transform: translateX(300%);
  }

  100% {
    transform: translateX(-50%);
  }
}

@keyframes loading {
  50% {
    transform: translateX(var(--loading-bar-width));
  }
}

@keyframes widthFillAnimation {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}

.blurred::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(10px); /* apply the blur */
  pointer-events: none; /* make the overlay click-through */
}
